import React, {useState} from 'react';
import Top5Book from "@/pages/Admin/Analysis/components/Top5Book";
import {Card, Col} from "antd";
import {PageContainer} from "@ant-design/pro-components";
import Top5User from "@/pages/Admin/Analysis/components/Top5User";
import CountAnalysis from "@/pages/Admin/Analysis/components/CountAnalysis";

const Page: React.FC = () => {

  // 控制菜单栏的 Tab 高亮
  const [activeTabKey, setActiveTabKey] = useState<string>("book");

  return (
    <PageContainer>
      <Col xs={24} md={18}>
        <Card
          tabList={[
            {
              key: "count",
              tab: "总计",
            },
            {
              key: "book",
              tab: "书籍借阅量top",
            },
            {
              key: "user",
              tab: "用户借阅量top",
            },
          ]}
          activeTabKey={activeTabKey}
          onTabChange={(key: string) => {
            setActiveTabKey(key);
          }}
        >
          {activeTabKey === "book" && (
            <>
              <Top5Book/>
            </>
          )}
          {activeTabKey === "user" && (
            <>
              <Top5User/>
            </>
          )}
          {activeTabKey === "count" && (
            <CountAnalysis/>
          )}
        </Card>
      </Col>
    </PageContainer>
  )
};

export default Page;
